<template>
  <MainSlot v-loading="loading">
    <!-- <template v-slot:searchForm>
      <SearchForm :formItemList="formItemList" @search="search"></SearchForm>
    </template> -->

    <template v-slot:table>
      <TableData :config="table_config" :tableThead="tableThead" :dataList="dataList" :loading="loading">
        <template v-slot:generateTime="{ row }">
          {{ row.generateTime ? dateToFormat(row.generateTime) : "无"
          }}
          ~ {{ row.endTime ? dateToFormat(row.endTime) : "无" }}
        </template>

        <template v-slot:inspectionTaskId="{ row }">
          <el-button v-if="row.inspectionTaskId" type="text" size="mini"
            @click="showResult(row.inspectionTaskId)">查看巡查结果</el-button>
        </template>
      </TableData>
    </template>

    <template v-slot:pagination>
      <Pagination @size-Change="handleSizeChange" :size="size" @current-change="handleCurrentChange" :page="page"
        :total="total">
      </Pagination>
    </template>

    <template v-slot:dialogModule>
      <el-dialog :close-on-click-modal="false" title="查询结果" :visible.sync="isShowResult" width="60%" center>
        <div class="result">
          <el-table v-loading="loading" highlight-current-row :data="resultData" border>
            <el-table-column prop="inspectionPointName" label="巡查点" />
            <el-table-column prop="facilityName" label="设施" />
            <el-table-column prop="alarmBatchName" label="批次" />
            <el-table-column prop="result" label="巡查结果">
              <template slot-scope="scope">
                <span v-if="scope.row.finalStatus === 1">正常</span>
                <span v-if="scope.row.finalStatus === 2">异常</span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="结果描述" />
            <el-table-column label="查看图片">

              <template slot-scope="scope">
                <el-button v-if="scope.row.finalStatus === 1" type="text" size="mini"
                  @click="showResultmessage(scope.row.pictureId)">查看</el-button>
                <el-button v-if="scope.row.finalStatus === 2" type="text" style="color:#a49090" disabled>查看</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="alarmDes" :label="'信息'" />
            <el-table-column label="查看异常图片">
              <template slot-scope="scope">
                <el-button v-if="scope.row.finalStatus === 2" type="text" size="mini"
                  @click="showResultmessage(scope.row.pictureId)">查看</el-button>
                <el-button v-if="scope.row.finalStatus === 1" type="text" disabled style="color:#a49090">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
      <el-dialog :close-on-click-modal="false" :visible.sync="isShowimage" width="60%" center>
        <img v-for="item in imageUrlList" :key="item.pictureId" class="imgmessage" width="100%"
          :src="'data:image/jpg;base64,' + item.pictureData" />
        <!-- </div> -->
      </el-dialog>
    </template>
  </MainSlot>
</template>

<script>
import MainSlot from "@/components/MainSlot";
import Pagination from '@/components/Pagination';
import SearchForm from '@/components/SearchForm';
import TableData from '@/components/TableData';
import BtnSlot from '@/components/BtnSlot';
import AddEdit from './components/addEdit.vue';
import MapContainerDialog from './components/mapContainerDialog.vue';
import patrolInfoManage from "@/api/patrol-info-manage/patrol-point-manage";
import historyPatrolRecord from '@/api/patrol-info-manage/history-patrol-record'
export default {
  components: { MainSlot, Pagination, SearchForm, TableData, BtnSlot, AddEdit, MapContainerDialog },
  data() {
    return {
      loading: false,
      isShowimage: false,
      isShowResult: false,
      searchFormData: {},
      viewFlag: false,
      latLngList: [],
      imageUrlList: [],
      resultData: [],
      addEditFlag: 'add',
      formData: {},
      page: 1,
      size: 10,
      total: 100,
      selectIndex: 0,
      dataList: [],
      tableThead: [
        { isShow: true, label: '巡查任务', prop: 'inspectionTaskName' },
        { isShow: true, label: '巡查路线', prop: 'inspectionRouteName' },
        { isShow: true, label: '巡查人', prop: 'employeeName' },
        { isShow: true, label: '巡查完成时间', slotName: 'generateTime' },
      ],
      // 配置项
      table_config: {
        // isCheckBox: true,

        isOperation: true,
        // 表格操作列
        operation: {
          label: '巡查结果',
          width: '200',
          cols: [
            {
              label: '查看结果',
              type: 'primary',
              flag: 'edit',
              handleRow: this.handleRow
            }
          ]
        },
      },
      formItemList: [
        {
          label: '任务名称',
          type: 'select',
          selectOptions: [{ text: 'xxx任务', value: 'xxx任务' }],
          param: 'item',
          defaultSelect: '', // 下拉框默认选中项
          multiple: false,
          isShow: true
        },
        {
          label: '巡查路线',
          type: 'select',
          selectOptions: [{ text: 'xxx线', value: 'xxx线' }],
          param: 'item3',
          defaultSelect: '', // 下拉框默认选中项
          multiple: false,
          isShow: true
        }
      ]
    }
  },
  mounted() {
    this.queryPageByCondition();
  },
  methods: {
    queryPageByCondition() {
      let params = {
        page: this.page,
        size: this.size,
        entity: {
          ...this.searchFormData
        }
      }
      historyPatrolRecord.getInspectionTaskList(params).then(res => {
        this.dataList = [];
        if (res.code == 1) {
          this.dataList = res.data.content || [];
          this.total = res.data.totalElements;
          if (res.data.totalPages && this.page > res.data.totalPages) {
            this.page = res.data.totalPages;
            this.queryPageByCondition();
          }
        } else {
          this.$message.warning(res.msg || '分页查询失败')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleCurrentChange(page) {
      this.page = page;
      this.queryPageByCondition();
    },
    handleSizeChange(size) {
      this.size = size;
      this.queryPageByCondition();
    },
    handleRow(rowData) {
      this.showResult(rowData.inspectionTaskId)
    },
    // 获取结果
    showResult(inspectionTaskId) {
      if (inspectionTaskId) {
        this.isShowResult = true;
        if (inspectionTaskId) {
          let params = {
            inspectionTaskId: inspectionTaskId
          };
          patrolInfoManage.getInspectionResultList(params).then(res => {
            this.loading = false;
            this.resultData = res.data;
            // console.log(this.resultData);
          });
        }
      } else {
        return;
      }
    },
    showResultmessage(Id) {
      let params = {
        pictureId: Id
      };
      patrolInfoManage.queryByConditionList(params).then(res => {
        let data = res.data;
        this.imageUrlList = data;
        if (data.length > 0) this.isShowimage = true;
        else this.$message.warning("暂无图片");
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}
</style>